<!DOCTYPE html>
<html>
<head th:include="include :: header"></head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form">
                <input id="dataParams" name="dataParams" type="hidden" th:value="${taskParams}">
                <div class="paramsContent"></div>
                <div class="layui-form-item" style="text-align:center;">
                    <input type="button" class="layui-btn layui-btn-normal" value="保存" onclick="reptileData.paramsSave();">
                    <input type="button" class="layui-btn layui-btn-primary" value="返回" onclick="parent.layui.admin.events.closeThisTabs()">
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript">
    var reptileData = {};
    layui.config({
        base: ctx + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index'         //主入口模块
    }).use(['index', 'form'], function () {
        var prefix = ctx + "/manage/task/task";
        var $ = layui.$, form = layui.form;

        form.verify(commonJs.form.verify);

        //添加参数类型
        reptileData.addParamsType = function (value) {
            value = value || '';
            var htmlContent = ' <div class="reptileDataItem">\n' +
                '            <div class="layui-form-item">\n' +
                '                <div class="layui-col-sm6">\n' +
                '                    <label class="layui-form-label">所需参数：</label>' +
                '                    <div class="layui-input-block">\n' +
                '                        <input type="text" placeholder="请输入类型" autocomplete="off" class="layui-input paramsType" value="' + value + '">\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-col-sm6" style="text-align:right">\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="reptileData.addParamsType();">\n' +
                '                           <i class="layui-icon"></i>添加类型\n' +
                '                    </button>\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="reptileData.addKeyValue(this);">\n' +
                '                           <i class="layui-icon"></i>添加键值\n' +
                '                    </button>\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-danger" style="margin-top:6px;" onclick="reptileData.delParamsType(this);">\n' +
                '                            <i class="layui-icon"></i>删除\n' +
                '                    </button>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '        </div>';
            $('.paramsContent').append(htmlContent);
        };

        //添加参数键值对
        reptileData.addKeyValue = function (target, key, value) {
            key = key || '';
            value = value || '';
            var htmlContent = '<div class="layui-form-item keyValue">\n' +
                '                <div class="layui-col-sm3">\n' +
                '                    <div class="layui-input-block">\n' +
                '                        <input type="text" placeholder="请输入所需参数key" autocomplete="off" class="layui-input paramsKey" value="' + key + '">\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-col-sm7">\n' +
                '                    <div class="layui-input-block">\n' +
                '                       <input type="text" placeholder="请输入所需参数value" autocomplete="off" class="layui-input paramsValue" value="' + value + '">\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-col-sm2" style="text-align:right;margin-top:3px;">\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="reptileData.delKeyValue(this)">\n' +
                '                       <i class="layui-icon"></i>删除\n' +
                '                    </button>\n' +
                '                </div>\n' +
                '            </div>';
            $(target).parents('.reptileDataItem').append(htmlContent);
        };

        //删除参数类型
        reptileData.delParamsType = function (target) {
            if ($('.reptileDataItem').length > 1) {
                $(target).parents('.reptileDataItem').remove();
            } else {
                commonJs.openMsg('cry', '所需参数现在只有一个，无法再删除了！');
            }
        };

        //删除参数键值对
        reptileData.delKeyValue = function (target) {
            $(target).parents('.keyValue').remove();
        };

        //爬取该链接的结果
        reptileData.paramsSave = function () {
            //封装参数
            getParamsData();
            var taskParams = $('#dataParams').val();
            commonJs.openAjax(prefix + "/params/save", {taskParams: taskParams}, function (result) {
                if (result.code == 0) {
                    commonJs.openMsg('success', '保存成功！', function () {
                        window.location.reload();
                    });
                } else {
                    commonJs.openMsg('error', result.msg);
                }
            });
        };

        //拼接所需参数json
        function getParamsData() {
            var paramsArr = [];
            $(".reptileDataItem").each(function () {
                var keyValueArr = [];
                var paramsType = $(this).find(".paramsType").val() || '';
                if (paramsType == '') {
                    return;
                }
                $(this).find(".keyValue").each(function () {
                    var key = $(this).find(".paramsKey").val() || '';
                    var value = $(this).find(".paramsValue").val() || '';
                    var keyValue = {'key': key, 'value': value};
                    keyValueArr.push(keyValue);
                });
                var params = {'type': paramsType, 'value': keyValueArr};
                paramsArr.push(params);
            });
            $('#dataParams').val(JSON.stringify(paramsArr));
        }

        //解析所需数据
        var params = JSON.parse($('#dataParams').val() || '[]');
        if (params.length > 0) {
            $(params).each(function (index, item) {
                reptileData.addParamsType(item.type);
                var value = item.value || [];
                $(value).each(function (index, item) {
                    var target = $(".reptileDataItem:last").find('div:first');
                    reptileData.addKeyValue(target, item.key, item.value);
                });
            });
        } else {
            reptileData.addParamsType();
            var target = $(".reptileDataItem:last").find('div:first');
            reptileData.addKeyValue(target);
        }

        //回到顶部按钮
        util.fixbar({
            bgcolor: '#3B91FF',
            showHeight: 100,
            click: function (type) {
                if (type === 'top') {
                    $('.layui-body').animate({
                        scrollTop: 0
                    }, 200);
                }
            }
        });
    })
</script>
</body>
</html>


